<!-- @format -->
<template>
  <div class="table-form-container_content">
    <el-row>
      <el-col :span="24">
        <!-- form表单 -->
        <div class="table-header" v-if="tableSearch && tableSearch.length > 0">
          <el-form
            size="small"
            :rules="rules"
            :model="formSearch"
            :inline="true"
            ref="formSearch"
            label-position="right"
            v-bind="{ 'label-width': '110px', ...(options && options.formProps) }"
          >
            <!-- 搜索栏位置标题 -->
            <slot name="tableheadertitle"></slot>
            <el-form-item
              :key="index"
              :prop="item.value"
              class="table-header-item"
              :label="item.label"
              v-bind="item.labelProps"
              v-for="(item, index) in tableSearch"
            >
              <el-select
                clearable
                v-bind="item.props"
                v-if="item.type === 'select'"
                v-model="formSearch[item.value]"
                :placeholder="`请选择${item.placeholder || item.label}`"
              >
                <el-option
                  v-for="option in item.children"
                  :key="option.value"
                  :value="option.value"
                  :label="option.label"
                />
              </el-select>
              <el-date-picker
                clearable
                style="width: 100%"
                placeholder="选择日期"
                v-model="formSearch[item.value]"
                v-else-if="item.type === 'picker'"
                v-bind="item.props || { type: 'date' }"
              />
              <el-cascader
                clearable
                v-bind="item.props"
                :options="item.options"
                v-model="formSearch[item.value]"
                v-else-if="item.type === 'cascader'"
                :placeholder="`请输入${item.placeholder || item.label}`"
              ></el-cascader>
              <el-input
                v-else
                clearable
                v-bind="item.props"
                :type="item.inputType || 'text'"
                v-model="formSearch[item.value]"
                :placeholder="`请输入${item.placeholder || item.label}`"
                :maxlength="item.maxlength"
                @keyup.enter.native="handleSearch"
                :oninput="handleChangeInput(item)"
              />
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
              <el-button plain size="small" icon="el-icon-refresh-right" @click="handleReset('formSearch')"
                >重置</el-button
              >
            </el-form-item>
            <!-- 搜索栏插槽 -->
            <slot name="tableheader"></slot>
          </el-form>
        </div>

        <!-- 扩展性内容 -->
        <slot name="content_context"></slot>

        <!-- table中间button eg:导出 -->
        <div v-if="exportBut && exportBut.length > 0" class="btn-operates">
          <a :key="index" :href="item.href || null" v-for="(item, index) in exportBut" @click="item.method()">
            <nu-button size="small" type="primary">{{ item.title }}</nu-button>
          </a>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <!-- 表格上插槽，页签等 -->
        <slot name="tableTopSlot"></slot>
        <!-- table表格 -->
        <div @mouseover="changeM" @mouseout="changeO">
          <el-table
            size="small"
            :border="border"
            style="width: 100%"
            :data="dataSource"
            v-loading="loading"
            v-bind="options"
            v-on="tableEvents"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            @mouseover="changeM"
            @mouseout="changeO"
            
          >
            <!-- 复选框 -->
            <el-table-column
              type="selection"
              style="width: 55px"
              v-if="options && options.selection && (!options.isShow || options.isShow())"
            />
            <!-- 序号 -->
            <el-table-column
              width="60"
              align="center"
              type="index"
              v-if="options && options.index"
              :label="options && options.labelIndex"
            />

            <!-- 表格数据 -->
            <template v-for="(column, index) in columns">
              <table-columns :column="column" :key="index"></table-columns>
            </template>

            <!-- slot插槽按钮 -->
            <el-table-column label="操作" align="right" v-if="options && options.slotcontent">
              <template slot-scope="scope">
                <slot :data="scope"></slot>
              </template>
            </el-table-column>

            <!-- 操作按钮 -->
            <el-table-column
              label="操作"
              align="center"
              v-bind="options && options.props"
              v-if="operates && operates.length > 0"
            >
              <template slot-scope="scope">
                <div class="operate-group">
                  <template v-for="(btn, key) in operates">
                    <span :key="key" v-if="!btn.isShow || (btn.isShow && btn.isShow(scope.row, scope.$index))">
                      <template v-if="btn.render">
                        <render
                          :column="scope.row"
                          :row="scope.row"
                          :render="btn.render"
                          :index="scope.$index"
                        ></render>
                      </template>
                      <template v-if="!btn.render">
                        <nu-button
                          :size="btn.size || 'small'"
                          :type="btn.type || `text`"
                          :icon="btn.icon"
                          :plain="btn.plain"
                          :style="btn.setStyle && btn.setStyle(scope.row, scope.$index)"
                          v-bind="btn.props"
                          @click.native.prevent="btn.method(scope.row, scope.$index)"
                          :disabled="btn.disabled && btn.disabled(scope.row, scope.$index)"
                          >{{ btn.label }}</nu-button
                        >
                      </template>
                    </span>
                  </template>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <br />
        <!-- 分页部分 -->
        <el-pagination
          background
          class="pagination"
          v-if="pagination"
          :total="dataTotal"
          :page-size="pagination.pageSize"
          @current-change="handleChangePage"
          v-bind="options && options.pageExtend"
          :current-page="pagination.currentPage"
          :layout="
            options && options.pageExtend && options.pageExtend.layout
              ? options.pageExtend.layout
              : 'total, prev, pager, next'
          "
          v-on="options && options.handlePageEvent"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { convertParams } from './convertParams';
import tableColumns from './tableColumns.vue';
// import EditableCell from './EditableCell.vue'
const methods = {
  // 复选框选中项
  handleSelectionChange(val) {
    this.multipleSelection = val;
    this.$emit('handleSelectionChange', Array.from(val));
  },

  // 改变分页触发事件
  handleChangePage(val) {
    this.$emit('handleChangePage', val);
  },

  // 搜索查询按钮
  handleSearch() {
    if (this.rules) {
      return this.$refs['formSearch'].validate(valid => {
        if (!valid) return false;
        this.$emit('handleSearch', convertParams(Object.assign({}, this.formSearch)));
      });
    }
    this.$emit('handleSearch', convertParams(Object.assign({}, this.formSearch)));
  },

  // 搜索重置按钮
  handleReset(formName) {
    this.$refs[formName].resetFields();
    this.formSearch = this.reset ? { ...this.value } : {};
    this.$emit('handleReset');
    if (this.reset) return false;
    this.handleSearch();
  },

  // input为number校验
  handleChangeInput(item) {
    return item.inputType === 'number'
      ? this.handleOnInput(this.formSearch[item.value], item.value, item.rulesLength)
      : null;
  },

  // input渲染长度校验
  handleOnInput(val, label, rulesLength, maxlength = 11) {
    if (val && Number(val) <= 0) {
      this.formSearch[label] = 0;
    }
    if (rulesLength && val && val.length > maxlength) {
      this.formSearch[label] = this.formSearch[label].slice(0, maxlength);
    }
  },
  // 行滚动方法
  commercialCoal() {
    const tableScrolling = this.$refs.multipleTable;
    console.log(tableScrolling, 'tableScrolling');
    const divData = tableScrolling.bodyWrapper;
    setInterval(() => {
      // 元素自增距离顶部1像素
      if (this.mouseoverJ == true) {
        divData.scrollTop += 2;
        if (divData.clientHeight + divData.scrollTop + 5 >= divData.scrollHeight) {
          // 重置table距离顶部距离
          divData.scrollTop = 0;
        }
      }
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
    }, 80);
  },
  changeM() {
    this.mouseoverJ = false;
  },
  changeO() {
    this.mouseoverJ = true;
  },
};

export default {
  name: 'table-list',
  // components:{ EditableCell },
  props: {
    // 是否滚动
    commercialCoalIf: {
      type: Boolean,
      default: true,
    },
    // 搜索栏
    tableSearch: {
      type: Array,
    },
    // 校验规则
    rules: {
      type: Object,
    },
    value: {
      type: Object,
    },
    // 重置
    reset: {
      type: Boolean,
    },
    // 表格数据
    dataSource: {
      type: Array,
      default:()=> [],
    },
    // 表头
    columns: {
      type: Array,
      default:()=> [],
    },
    // 纵向边框
    border: {
      type: Boolean,
      default: false,
    },
    // 是否有数据加载动画
    loading: {
      type: Boolean,
      default: false,
    },
    slotcontent: {
      type: Boolean,
      default: false,
    },
    // 操作按钮数组
    operates: {
      type: Array,
    },
    // 分页属性对象
    pagination: {
      type: Object,
      default: null,
    },
    // 分页总条目数
    dataTotal: {
      type: Number,
      default: 0,
    },
    // 是否有导出按钮
    exportBut: {
      type: Array,
    },
    options: Object,
    tableEvents: Object,
  },

  data() {
    return {
      formSearch: {},
      multipleSelection: [],
      mouseoverJ: true,
    };
  },

  mounted() {
    
    this.formSearch = { ...this.value };
    this.$nextTick(() => {
      this.$emit('toggleRowSelection', this.$refs.multipleTable);
    });
    if (this.commercialCoalIf) {
      this.commercialCoal();
    }
  },
  created(){
    this.$nextTick(()=>{
      let level = document.getElementsByClassName('el-table__row--level-1')
      if(level.length > 0){
        for(let i =0; i < level.length;i++){
          if(i % 2 === 0){
            
            level[i].style['backgroundColor'] = '#D4DDF3'
          }else{
            
            level[i].style['backgroundColor'] = '#EFF1F6 '
          }
        }
      }
    })
  },
  methods,
  watch: {
    value(val) {
      if (val) return (this.formSearch = { ...this.value });
    },
  },

  components: {
    tableColumns,
    render: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null,
        },
      },
      render: (h, opt) => {
        const params = {
          row: opt.props.row,
          index: opt.props.index,
        };
        if (opt.props.column) params.column = opt.props.column;
        return opt.props.render(h, params);
      },
    },
  },
};
</script>

<style scoped>
>>> .el-form-item__label {
  width: auto !important;
  white-space: nowrap;
  color: var(--label-color);
}
.el-range-editor--mini .el-range__close-icon,
.el-range-editor--mini .el-range__icon {
  line-height: 20px !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
</style>

<style scoped>
.table-form-container_content {
  /* overflow: hidden; */
}
.table-form-container_content .btn-operates {
  margin-bottom: 6px;
  float: right;
}
.table-form-container_content .btn-operates a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.table-header {
  padding-top: 10px;
  text-align: end;
}
.table-header .table-header-item {
  margin-left: 20px;
}
.table-header .table-header_button {
  text-align: right;
  float: right;
  margin-bottom: 12px;
  line-height: 40px;
}
.table-header .table-header-item .el-form-item {
  width: 100%;
  display: flex;
  flex: auto;
  margin-bottom: 12px;
}
.table-header .table-header-item .el-form-item .el-form-item__content,
.table-header .table-header-item .el-form-item .el-select {
  width: 100%;
}
.newjump {
  font-size: 12px;
  text-decoration: none;
  color: dodgerblue;
}
.pagination {
  text-align: center;
}
::v-deep .el-table__header {
  height: var(--table-header-height) !important;
  color:var(--table-header-color);
  background-color: var(--table-header-bgc-color) !important;
  font-size: var(--table-header-font);
  /* opacity: var(--table-header-bgc-opacity); */
}

.table-header .el-button {
  margin: var(--button-body-margin);
  padding-left: var(--button-body-padding-left);
  padding-right: var(--button-body-padding-right);
  box-shadow: var(--button-box-shadow);
  border: var(--button-border);
  color: var(--button-color) !important;
  background-color: var(--button-bgc) !important;
}

.table-header .el-button:active {
  background: var(--button-active-background) !important;
  border-color: var(--button-active-border-color) !important;
  color: var(--button-active-color) !important;
}

.el-select-dropdown__item.selected {
  color: var(--select-selected) !important;
}
.el-select-dropdown__item:hover {
  background-color: var(--select-hover) !important;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--select-selected) !important;
}
::v-deep .el-input__inner::-webkit-input-placeholder {
  color: var(--form-input-tips);
}
::v-deep .el-input__inner {
  box-shadow: var(--input-box-shadow);
  color: var(--input-color);
  font-size: var(--form-input-fontsize);
  border: var(--input-border) !important;
  background-color: var(--input-bgc);
}
::v-deep .el-range-editor .el-range-input {
  background-color: var(--input-bgc);
  color: var(--input-color);
}
.el-table {
  background-color: var(--table-bgc);
  color: var(--table-color);
  /* opacity: var(--table-opacity); */
}
.el-table ::v-deep th.el-table__cell {
  background-color: var(--table-header-bgc-color) !important;
  text-align: var(--table-header-text-align) !important;
  color: var(--table-header-color);
}
.el-table ::v-deep tbody {
  font-size: var(--table-fontSize);
}
.el-table ::v-deep thead {
  height: var(--table-header-height);
  /* box-shadow: var(--table-header-bgc-opacity); */
}
.el-table ::v-deep .el-table__body-wrapper tr:hover {
  color: var(--table-focus-color);
}
.el-table ::v-deep .el-table__row.expanded.el-table__row--level-0 {
  background-color: var(--table-tree-level-0-bgc) !important;
}
.el-table ::v-deep .el-table__row.expanded.el-table__row--level-0 .el-table__cell{
  color:var(--table-tree-level-0-color);
  border-right: 0px;
  font-size: var(--table-tree-level-0-font);
}
.el-table ::v-deep .el-table__row.el-table__row--level-2 {
  background-color: #DFE5EE !important;
}
/* ::v-deep .el-table__row--level-1:nth-child(2n + 0) {
  background-color: var(--table-bgc-1) !important;

}
::v-deep .el-table__row--level-1:nth-child(2n + 1) {
  background-color: var(--table-bgc-2) !important;
} */
/* .el-table ::v-deep .el-table__body-wrapper tr:nth-child(2n + 0) {
  background-color: var(--table-bgc-1) !important;
  border: none;
}
.el-table ::v-deep .el-table__body-wrapper tr:nth-child(2n + 1) {
  background-color: var(--table-bgc-2) !important;
} */
::v-deep .el-table__row--level-0{
  background-color: #294057 !important;
}
::v-deep .el-date-editor .el-range-separator {
  color: var(--input-color);
}
.el-row {
  margin-top: 5px;
  padding: 10px;
  background-color: var(--layout-bgc);
}
.el-col {
  padding: 0px 10px;
}
</style>
